<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="../layui/css/layui.css">
        <link rel="stylesheet" type="text/css" href="../css/register.css">
    </head>
    <style type="text/css">
    .getcode{
        font-size: 12px;
        color: #58d5f4;
        border: none;
        border-radius: 5px;
        padding:none;
        position: absolute;
        right: 0;
        bottom: 10px;
    }
    .getcode input{
        font-size: 12px;
        color: #58d5f4;
        border: 1px solid #58d5f4;
        border-radius: 5px;
        background: #fff;
        padding: 3px 5px;
    }
    .clearfix:after{
        content: '';
        display: block;
        clear: both;
    }
    .head_wrap span,.head_wrap div{
        float: left;
    }
    .head{
        width: 60px;
        height: 60px;
        border: 1px solid #ccc;
        border-radius: 100%;
        position: relative; 
    }
    .head img{
        width: 100%;
        height: 100%;
        opacity: 1;
        border-radius: 100%;
        left: 0;
        top: 0;
    }
    .head input{
        position: absolute;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        z-index: 9999;
    }
    </style>
    <body>
        <header>
            <a href="javascript:history.back(-1)" class="back"><img src="../img/back.png" height="18px"></a>
            <div class="center title">修改资料</div>
        </header>
        <form action="">
        <div class="head_wrap clearfix" style="margin-top:25px; ">
            <span style="line-height: 60px">头像:</span>
            <div class="head">
                <img>
                <input type="file" name="file">
            </div>
        </div>  
        <div class="register">
            <input type="text" name="old" value="">
            <input type="text" name="nickname" value="">
            <input type="text" name="qianming" value="">
            <div class="confirm center">确定修改</div>
            
        </div>
        </form>        
    </body>
</html>

<script src="../js/jquery-3.3.1.js"></script>
<script src="../layui/layui.all.js"></script>
<script src="../js/JS.js"></script>
<script>
    var uImg = localStorage.getItem('uImg');
    var qianming = localStorage.getItem('qianming');
    var uName = localStorage.getItem('uName');
    var uOld = localStorage.getItem('uOld');
    var nickname=$('input[name="nickname"]').val(uName);
    var old=$('input[name="old"]').val(uOld);
    var qianming=$('input[name="qianming"]').val(qianming);
    $('.head img').attr('src',uImg);
  
    $(".head").on("change", "input[type=file]", function() {
        $(this).prev().css("opacity","1")

        var filePath = $(this).val();//读取图片路径

        var fr = new FileReader();//创建new FileReader()对象
        var imgObj = this.files[0];//获取图片

        fr.readAsDataURL(imgObj);//将图片读取为DataURL
        var obj = $(this).prev()[0];//
        if(filePath.indexOf("jpg") != -1 || filePath.indexOf("JPG") != -1 || filePath.indexOf("PNG") != -1 || filePath.indexOf("png") != -1) {
            var arr = filePath.split('\\');
            var fileName = arr[arr.length - 1];
            $(this).parent().next().show();
            fr.onload = function() {
                obj.src = this.result;
                layer.confirm('确定修改您的头像吗?',{btn: ['确定', '取消'], title: "修改头像"},function(){
                 var formData= new FormData();
                 formData.append('img',imgObj);
                 $.ajax({
                    url: "/meiyou/modifyInfoimg",
                    data:formData,
                    type: "Post",
                    cache: false,//上传文件无需缓存
                    processData: false,//用于对data参数进行序列化处理 这里必须false
                    contentType: false, //必须
                    success: function (data) {
                        if(data.code==100){
                            layer.msg(data.msg);
                            window.location.href='login.html'
                        }else{
                            layer.msg(data.msg)
                        }
                    }
                })
             });
            };            
        } 
       
    });
  
$('.confirm').click(function () {
    var formData= new FormData();
    var nickname=$('input[name="nickname"]').val();
    var old=$('input[name="old"]').val();
    var qianming=$('input[name="qianming"]').val();
    
    formData.append('nickname',nickname);
    formData.append('old',old);
    formData.append('qianming',qianming);
    // formData.append('img',arr[0]);
    $.ajax({
        url: "/meiyou/modifyInfo",
        data:formData,
        type: "post",
        cache: false,//上传文件无需缓存
        processData: false,//用于对data参数进行序列化处理 这里必须false
        contentType: false, //必须
        success: function (data) {
         if(data.code==100){
          
          layer.msg(data.msg);
          localStorage.setItem('qianming',qianming);
          localStorage.setItem('uName',nickname);
          localStorage.setItem('uOld',old);
          window.location.reload();
         }else{
          layer.msg(data.msg);
         }
        }
    })
});
</script>
